<template>
	<transition name="fade">
		<div class="fixed-search-page" v-show="visible">
			<div class="search-page-wrap">
				<form @submit.prevent="search">
					<div class="content"> 
						<div class="input-wrap">
							<i class="iconfont search-icon">&#xe8af;</i>
							<input  
								type="text" 
								placeholder="搜索" 
								v-model="condition"
								@input="getKeyWord"
								@focus="focusEvent"
								@blur="blurEvent">
							<!-- <span class="clear">×</span> -->
							<img @click="clearCondition" v-show="condition != ''" class="clear-icon" src="../../assets/image/clear.png">
						 </div>
						<span class="cancel-search main-color" @click="cancelSearch">取消</span>
					</div> 

					<!-- 页面隐藏的submit按扭，entry时提交表单 -->
					<button class="hidden-submit-btn" type="submit"></button>
				</form>
			</div>

			<div class="key-word-lists">
				<slot></slot>
				
				<div class="none-wrap" v-if="!hasData">
					<i class="iconfont">&#xe7ec;</i>
					<p>{{tip}}</p>
				</div>
			</div>
		</div>
	</transition>
</template>

<script type="text/javascript"> 
	import { mapState } from 'vuex';
	export default { 

		props: {
			visible: {
				type: Boolean,
				default: false
			},
			
			resetKeyWord: {
				type: [String]
			},

			hasData: {
				type: Boolean,
				default: false
			},

			tip: {
				type: String,
				default: '搜索商家'
			}
		},

		data() {
			return {
				condition: '',
				isfocus: false, 
			}
		},

		mounted() { 
		},

		methods: {
			// 开始搜索
			search() {   
				this.$emit('search-data', this.condition);  
			},

			clickSearch(str) {
				this.$emit('search-data', str);  
			},

			// 取消搜索
			cancelSearch() {
				this.$emit('cancel-search');
				this.condition = '';
			},

			focusEvent() {
				this.isfocus = true;
			},

			blurEvent() {
				this.isfocus = false;
			},

			replaceStr(str) {
				var reg = new RegExp(this.condition, 'g');
				return str.replace(reg, '<span class="green">'+ this.condition +'</span>');
			},

			clearCondition() {
				this.condition = '';
			},
			
			getKeyWord() {
				this.$emit('get-key-word', this.condition);
			}
		},

		watch: {
			resetKeyWord(newV) {
				if (newV == 'reset') {
					this.condition = '';
					this.$emit('search-data', ''); 
				}
			}
		},

		// computed: {
		// 	...mapState({
		// 		keyWordList: state => state.keyWordList.list || []
		// 	})
		// }
	}
</script>

<style type="text/css" lang="scss">
	.no-left-pad {
		padding-left: 10px!important;
	}

	.fixed-search-page {
		position: fixed;
		z-index: 102;
		width: 100vw;
		height: 100vh;
		background: #fff;
		top: 0;
	}
</style>